<template>
    <div class="wrapper-loading"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="10"
    >
        <div class="wrapper">
            <div class="item">
                <img src="https://qn.diyeetech.com/20181218-104519-76e8b637.jpg?imageView2/2/w/200" alt="">
                <div class="profile">
                    <div>title</div>
                    <div>love icon</div>
                </div>
            </div>
            <div class="item">
                <img src="https://qn.diyeetech.com/20181218-104519-76e8b637.jpg?imageView2/2/w/200" alt="">
                <div class="profile">
                    <div>title</div>
                    <div>love icon</div>
                </div>
            </div>
            <div class="item">
                <img src="https://qn.diyeetech.com/20181218-104519-76e8b637.jpg?imageView2/2/w/200" alt="">
                <div class="profile">
                    <div>title</div>
                    <div>love icon</div>
                </div>
            </div>
            <div class="item">
                <img src="https://qn.diyeetech.com/20181218-104519-76e8b637.jpg?imageView2/2/w/200" alt="">
                <div class="profile">
                    <div>title</div>
                    <div>love icon</div>
                </div>
            </div>
            <div class="item">
                <img src="https://qn.diyeetech.com/20181218-104519-76e8b637.jpg?imageView2/2/w/200" alt="">
                <div class="profile">
                    <div>title</div>
                    <div>love icon</div>
                </div>
            </div>

        </div>
        <div :style="{opacity: loading1?1:0}" class="loading-div">loading</div>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                loading1: false
            }
        },
        methods: {
            loadMore() {
                var self = this
                console.log("loadMore")
                self.loading1 = true
                setTimeout(() => {
                    self.loading1 = false
                }, 500)
            }
        }
    }
</script>
<style lang="less" scoped>
    .loading-div {
        height: px2rem(100);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper {
        padding-left: px2rem(10);
        padding-right: px2rem(10);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
            margin-bottom: 10px;
            width: 49%;
            .profile {
                display: flex;
                justify-content: space-between;
                height: px2rem(50);
            }
            img {
                max-width: 100%;
                max-height: 100%;
            }

        }
    }
</style>